<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StarMQ Management</title>

    <style>
        .submit-button {
            background-color: #87B5FF;
            /* 默认背景颜色 */
            color: white;
            /* 默认字体颜色 */
            border: none;
            padding: 5px 10px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 12%;
        }

        .submit-button:hover {
            background-color: coral;
        }
    </style>
</head>

<body>
    <form action="/login" method="post" align="center">
        <img src="image/star_mq.jpg" width="230" style="margin-bottom: -1px"/>
        <table align="center">
            <tr>
                <td>
                    Username：
                </td>
                <td>
                    <input type="text" name="username" placeholder="admin" style="width: 200px;">
                    <text style="color: coral;">
                        *
                    </text>
                    <br />
                </td>
            </tr>
            <tr>
                <td>
                    Password：
                </td>
                <td>
                    <input type="password" name="password" placeholder="admin" style="width: 200px;">
                    <text style="color: coral;"> * </text> <br />
                </td>
            </tr>
            <tr>
                <td></td>
                <td align="left">
                    <input class="submit-button" type="submit" value="Login">
                </td>
            </tr>
        </table>
    </form>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $('form').submit(function (event) {
        event.preventDefault();
        // 获取表单数据
        var formData = $(this).serialize();
        // 发送AJAX请求
        $.ajax({
            url: '/user/login',
            method: 'post',
            data: formData,
            success: function (result) {
                // 请求成功时的回调函数
                if (result) {
                    // 如果服务器返回成功状态，则显示成功信息
                    $('#result').text('表单提交成功！');
                    var usernameValue = $('input[name="username"]').val();
                    window.location.href = "index.html";
                } else {
                    // 如果服务器返回失败状态，则显示错误信息
                    $('#result').text('表单提交失败，请重试！');
                }
            },
            error: function () {
                // 请求失败时的回调函数
                $('#result').text('请求失败，请检查网络连接！');
            }
        });
    });
</script>





</html>